<template>
    <div>
        <van-sticky>
            <van-nav-bar title="搜索商品" z-index='1'>
                <template #left>
                    <van-icon color='gray' name="arrow-left" size="20" @click="$router.back()" />
                </template>
            </van-nav-bar>
            <van-search v-model="keyword" placeholder="请输入搜索关键词" class="inp" @search='search' z-index='1' />
        </van-sticky>
        <van-list v-if='listShow' v-model="loading" :finished="finished" :offset="60" @load="loadMore"
            finished-text="------我是有底线的------" style="left: top">
            <van-cell v-for="(item,index) in result" :key="index" is-link @click="gotoDetail(item.id)">
                <template #icon>
                    <van-image width="120" height="100" :src="item.mainImage" />
                    <div class="info">
                        <p class="van-multi-ellipsis--l2">{{item.name}}</p>
                        <p class="item_price">
                            <span>￥{{item.price/100}}</span>
                            <span>已售<b>{{item.saleQuantity}}</b>件</span>
                        </p>
                    </div>
                </template>
            </van-cell>
        </van-list>
        <van-list v-else class="another">
            <van-image class="icon" width='80' hegiht='100'
                src=" //m.assets.shop.hisense.com/assets/files/hisense.46ef582304ee74ce.png" />
            <van-image width="300" height="300"
                src="https://img.shop.hisense.com/2019/03/05/7614427d-2264-4809-a518-676c9100fdac.png?x-oss-process=image/resize,m_fixed,w_750,h_1334/format,webp"
                fit="cover" />
        </van-list>
    </div>
</template>
<script>
    export default {
        name: 'Search',
        data() {
            return {
                result: [],
                loading: false,
                finished: false,
                page: 1,
                keyword: '',
                listShow: false,

            };
        },
        watch: {
            keyword: function (n, o) {
                this.page = 1;
                this.result = []
            },

        },
        created() {
            this.keyword = this.$route.query.keyword;
            if (this.keyword) {
                this.search(this.keyword)
            }

        },
        methods: {
            loadMore() {
                console.log('load more')
                if (!this.finished) {
                    this.page++;
                    if (this.keyword) {
                        this.search();
                    }

                }

            },
            search() {
                this.listShow = true;
                this.loading = true;
                this.finished = false;
                this.$request.post('goods/selectgoods', { name: this.keyword }).then(({ data }) => {
                    this.result.push(...data.ret.data);
                    this.loading = false;
                    console.log(data.ret.data);
                    if (this.result.length >= data.ret.total) {

                        this.finished = true;
                    }
                })

            },
            gotoDetail(id) {
                // this.$router.push('/goodsdetails/'+id)
                this.$router.push({
                    name: 'Goodsdetails',
                    params: {
                        id
                    }
                })
            },
        },
    }
</script>
<style scoped>
    .another {
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .van-list {
        margin-bottom: 50px;
    }
        .info {
        width: 100%;
    }

    .info p {
        padding-left: 3px;
        font-size: 12px;
    }

    /* .item_name {
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        width: 200px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    } */

    .item_price span:nth-child(1) {
        color: red;
        font-size: 14px;
        padding-right: 5px;
    }

    .item_price {
        display: flex;
        justify-content: space-between;
    }
    .item_price span:nth-child(2) b{
        color: rgb(202, 98, 98);
    }
</style>